<template>
	<el-select
		v-model="merchantInValue"
		:placeholder="placeholder"
		:clearable="clearable"
		:disabled="disabled"
		:multiple="multiple"
		:filterable="filterable"
		:multiple-limit="multipleLimit"
		@change="handleChange"
		@blur="handleBlur"
		@focus="handleFocus"
	>
		<slot :merchantList="merchantList">
			<el-option
				v-for="item in merchantList"
				:key="item.id"
				:label="item.merchantName"
				:value="item.id"
			></el-option>
		</slot>
	</el-select>
</template>

<script>
import i18n from '@/locales'

export default {
	props: {
		// 绑定值
		value: {
			type: [String, Number, Array],
			required: false,
			default: ''
		},
		// 是否可以清空选项
		clearable: { type: Boolean, default: true },
		// 占位符
		placeholder: { type: String, default: i18n.t('common.select_all') },
		// 是否多选
		multiple: { type: Boolean, default: false },
		// 多选时用户最多可以选择的项目数，为 0 则不限制
		multipleLimit: { type: Number, default: 0 },
		// 是否禁用
		disabled: { type: Boolean, default: false },
		filterable: { type: Boolean, default: true }
	},
	computed: {
		merchantList() {
			return this.$store.getters.merchantList || []
		},
		merchantInValue: {
			get() {
				// 当前选择的商户详情信息
				this.$emit(
					'update:merchantInfo',
					this.getMerchantInfo(this.value)
				)
				return this.value
			},
			set(val) {
				this.$emit('input', val || undefined)
			}
		}
	},
	mounted() {},
	methods: {
		handleChange(val) {
			this.$emit('change', val)
		},
		handleBlur(e) {
			this.$emit('blur', e)
		},
		handleFocus(e) {
			this.$emit('focus', e)
		},
		getMerchantInfo(val) {
			return this.merchantList.find((item) => item.id === val)
		}
	}
}
</script>

<style lang="scss" scoped></style>
